<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.customerName" placeholder="客户姓名" style="width: 160px;margin-top:6px" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.merchantId" placeholder="选择商户" filterable class="filter-item" style="width:160px;margin-top:6px">
        <el-option label="选择商户" value="" />
        <el-option
          v-for="item in merchant_list"
          :key="item.merchant_id"
          :label="item.merchant_name"
          :value="item.merchant_id"
        />
      </el-select>
      <el-select v-model="listQuery.loanStatus" placeholder="订单状态" filterable class="filter-item" style="width:160px;margin-top:6px">
        <el-option label="选择状态" value="" />
        <el-option
          v-for="item in loanStatusList"
          :key="item.status"
          :label="item.name"
          :value="item.status"
        />
      </el-select>
      <el-select v-model="listQuery.version" placeholder="版本" filterable class="filter-item" style="width:160px;margin-top:6px">
        <el-option label="选择版本" value="" />
        <el-option label="20250418前" :value="1"/>
        <el-option label="20250418后" :value="2"/>
      </el-select>
      <el-date-picker v-model="listQuery.beginTime" style="width:140px;" format="yyyy-MM-dd" type="datetime" placeholder="订单开始日" />
      <el-date-picker v-model="listQuery.endTime" style="width:140px" format="yyyy-MM-dd" type="datetime" placeholder="订单结束日" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-top:9px" @click="handleFilter">
        查询
      </el-button>   
    </div>
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border :row-class-name="tableRowClassName" fit highlight-current-row style="width: 100%;">
      <el-table-column label="商户" align="center">
        <template slot-scope="{row}">
          <span>{{ row.departmentName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="借据编号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.loanNo }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="客户姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.customerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户电话" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证" align="center">
        <template slot-scope="{row}">
          <span>{{ row.idCard }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.loanAmt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="放款编号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.payLoanNo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="放款时间" align="center">
        <template slot-scope="{row}">
          <span>{{  row.loanFinishTime/1000|formatDate }}</span>
        </template>
      </el-table-column>
      
      <!-- <el-table-column label="放款模式" align="center">
        <template slot-scope="{row}">
          <span>{{ row.lendingMode }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="当前状态" align="center">
        <template slot-scope="{row}">
          <span v-if="row.loanStatus=='1'">正常</span>
          <span v-if="row.loanStatus=='2'">逾期</span>
          <span v-if="row.loanStatus=='3'">提前结清</span>
          <span v-if="row.loanStatus=='4'">正常结清</span>
          <span v-if="row.loanStatus=='5'">逾期结清</span>
        </template>
      </el-table-column>
     
      <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button size="mini" type="primary"  @click="showTongrongPayment(row.applyNo)">
            还款计划
          </el-button>
          <!-- <el-button size="mini" type="danger"  v-if="row.applyStatus<5&&nodes.indexOf('154')!=-1" @click="cancelOrder(row.applyNo)">
            作废
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      <el-dialog title="通融还款计划" :visible.sync="paymentAble" style="width: 2000px;margin: auto;">
        <tongrongPayment :applyNo="applyNo"></tongrongPayment>
      </el-dialog>
  </div>

</template>

<script>
import {
  getTongrongLoanList
} from '@/api/finance'
import waves from '@/directive/waves' // waves directive
import { merchantListOnlyMerchant } from '@/api/merchant'
import {getNodes} from '@/utils'
import {
  formatDate
} from '@/utils/formatDate.js'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import tongrongPayment from '@/components/Finance/tongrongPayment.vue'
export default {
  name: 'ReceiveTable',
  components: {
    Pagination,tongrongPayment
  },
  directives: {
    waves
  },
  filters: {
    formatDate(time) {
      time = time * 1000
      const date = new Date(time)

      return formatDate(date, 'yyyy-MM-dd')
    },
  },
  data() {
    return {
      form:{},
      order:{},
      merchant_list:[],
      order_list:[],
      tableKey: 0,
      list: null,
      paymentAble:false,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        version:1
      },
      applyNo:'',
      nodes:[],
      loanStatusList:[
        {status:1,name:'正常'},
        {status:2,name:'逾期'},
        {status:3,name:'提前结清'},
        {status:4,name:'正常结清'},
        {status:5,name:'逾期结清'}
      ]

    }
  },
  created() {
    this.nodes = getNodes();
    this.cacheQueryFormat();
    this.getList();
    this.getMerchantList();
    // 添加钩子，页面刷新
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  mdestroyed() {
    // 添加钩子，页面刷新
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    beforeunloadFn(e) {
      // 刷新页面事件
      sessionStorage.removeItem('tongrongLoan')
    },
    cacheQueryFormat() {
      const cacheQuery = sessionStorage.getItem('tongrongLoan')
      if (cacheQuery) {
        this.listQuery = JSON.parse(cacheQuery)
      }
    },
 
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
 
    getMerchantList() {
      merchantListOnlyMerchant(this.listMerchantQuery).then(response => {
        this.merchant_list = response.data.merchant.data
      })
    },
    showTongrongPayment(applyNo){
      this.paymentAble = false;
      this.applyNo = applyNo;
      this.paymentAble = true;
      //console.log(applyNo);
      //this.getTongrongPayment(applyNo)
    },
    getList() {
      this.listLoading = true;
      sessionStorage.setItem('tongrongLoan', JSON.stringify(this.listQuery))
      getTongrongLoanList(this.listQuery).then(res => {
        this.listLoading = false
        this.list = res.data.list
        this.total = res.data.total
      })
      
    },
    tableRowClassName({row, rowIndex}) {
      let str = '';
      switch(row.loanStatus){
        case '3': case '4': case'5':
          str = 'success-row';
          break
        case '2':
          str = 'danger-row';
          break
      }

      return str;
    },
  }
}
</script>

<style>
  .el-table .success-row {
    background: #98dd72;
  }
  .el-table .warning-row {
      background: #E6A23C;
    }
  .el-table .danger-row {
      background: orangered;
    }
</style>
